<!-- 备料单详情 -->
<template>
  <el-dialog
    custom-class="detailDialog"
    append-to-body
    :close-on-click-modal="false"
    title="备料单详情"
    :visible.sync="detailDialog.visible"
    v-if="detailDialog.visible"
    :fullscreen="false"
    width="80%"
    top="7vh"
    @close="close()"
  >
    <div class="detailTable">
      <!-- <div class="title"></div> -->
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="txt">基本信息</div>
      </div>
      <div class="content">
        <avue-form v-model="detailHeaderForm" :option="detailHeaderOption"></avue-form>
      </div>
      <div class="titleIcon">
        <i class="el-icon-vertical-bar avue-group__icon"></i>
        <div class="txt">物料明细</div>
      </div>
      <el-tabs v-model="tabsValue" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="原材料仓发料明细" name="1">
          <avue-crud
            ref="detailTableCrud"
            :option="detailDialog.option"
            :page.sync="detailDialog.page"
            :table-loading="detailDialog.loading"
            :data="detailDialog.data"
            v-model="detailDialog.form"
            @current-change="currentChange"
            @size-change="sizeChange"
          >
            <template slot-scope="{ row }" slot="menu">
              <el-button type="text" icon="el-icon-view" size="small" plain style="border: 0 !important" @click.stop="handlePackView(row)">合并详情</el-button>
            </template>
          </avue-crud>
        </el-tab-pane>
        <el-tab-pane label="线边仓发料明细" name="2">
          <avue-crud
            ref="lineSideWareHouseTableCrud"
            :option="lineSideWareHouseDialog.option"
            :page.sync="lineSideWareHouseDialog.page"
            :table-loading="lineSideWareHouseDialog.loading"
            :data="lineSideWareHouseDialog.data"
            v-model="lineSideWareHouseDialog.form"
            @current-change="lineSideCurrentChange"
            @size-change="lineSideSizeChange"
          >
            <template slot-scope="{ row }" slot="menu">
              <el-button type="text" icon="el-icon-view" size="small" plain style="border: 0 !important" @click.stop="handlePackView(row)">合并详情</el-button>
            </template>
          </avue-crud>
        </el-tab-pane>
        <el-tab-pane label="半成品仓发料明细" name="3">
          <avue-crud
            :option="semifinished.option"
            :page.sync="semifinished.page"
            :table-loading="semifinished.loading"
            :data="semifinished.data"
            v-model="semifinished.form"
            @current-change="semCurrentChange"
            @size-change="semSizeChange"
          >
            <template slot-scope="{ row }" slot="menu">
              <el-button type="text" icon="el-icon-view" size="small" plain style="border: 0 !important" @click.stop="handlePackView(row)">合并详情</el-button>
            </template>
          </avue-crud>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 备料推荐包装详情 -->
    <packBoxDialog ref="packBox" :visible="packBoxDialog.visible" @closeDialog="packBoxDialog.visible = false"></packBoxDialog>
    <!-- 备料推荐批次详情 -->
    <lotNoDialog ref="lotNoBox" :visible="lotNoDialog.visible" @closeDialog="lotNoDialog.visible = false"></lotNoDialog>
  </el-dialog>
</template>

<script>
import { getDetail, getDetailPageList, getMaterialInfoById, getPackBoxDetail, getUnpackDetail } from '@/api/warehouse/preMaterialList';
import exportComp from '@/components/export-comp';
import packBoxDialog from './packBoxDialog.vue';
import lotNoDialog from './lotNoDialog.vue';

import { mapGetters } from 'vuex';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';

export default {
  name: 'detailDialog',
  components: {
    exportComp,
    userTableConfig,
    packBoxDialog,
    lotNoDialog
  },
  mixins: [userConfig()],
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      sheetId: null,
      form1: {},
      form2: {},
      form3: {},
      form4: {},
      tabsValue: '1',
      detailHeaderForm: {},
      detailHeaderOption: {
        submitBtn: false,
        emptyBtn: false,
        detail: true,
        labelWidth: 160,
        column: [
          {
            label: '备料单号',
            span: 12,
            prop: 'preparationOrderNo'
          },
          {
            label: '工单号',
            span: 12,
            prop: 'workOrderNos'
          },
          {
            label: '单据状态',
            span: 12,
            prop: 'partModel',
            prop: 'status',
            type: 'select',
            dicData: [
              { label: '待出库', value: 1 },
              { label: '部分出库', value: 2 },
              { label: '已完成', value: 3 },
              { label: '已拆分', value: 4 }
            ]
          },
          {
            label: '产品编码',
            span: 12,
            prop: 'productPartNos'
          },
          {
            label: '产品名称',
            span: 12,
            prop: 'productPartNames'
          },
          {
            label: '产品型号',
            span: 12,
            prop: 'productPartModels'
          },
          {
            label: '创建人',
            span: 12,
            prop: 'createUserName'
          },
          {
            label: '创建时间',
            span: 12,
            prop: 'createTime'
          },
          {
            label: '关联的母/子备料单号',
            span: 24,
            prop: 'associatedOrderNos'
          }
        ]
      },
      detailDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        option: {
          calcHeight: 30,
          height: '380px',
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          delBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          page: true,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          menu: true,
          menuWidth: 100,
          column: [
            { label: '物料编码', prop: 'partNo', overHidden: true },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '物料型号',
              prop: 'partModel'
            },
            {
              label: '单据数量',
              prop: 'requiredQuantity'
            },
            {
              label: '发料仓',
              prop: 'issuedWarehouseName'
            },
            {
              label: '应发数量',
              prop: 'recommendQuantity'
            },
            {
              label: '推荐批次',
              prop: 'recommendLotNo',
              overHidden: true
            },
            {
              label: '推荐储位',
              prop: 'recommendStorageCode'
            },
            {
              label: '物料状态',
              prop: 'status',
              type: 'select',
              dicData: [
                { label: '待出库', value: 1 },
                { label: '部分出库', value: 2 },
                { label: '已完成', value: 3 },
                { label: '已拆分', value: 4 }
              ]
            },
            {
              label: '已发数量',
              prop: 'issuedQuantity',
              overHidden: true
            },
            {
              label: '待发数量',
              prop: 'remainingQuantity',
              overHidden: true
            },
            {
              label: '超发数量',
              prop: 'overQuantity',
              overHidden: true
            }
          ]
        }
      },
      lineSideWareHouseDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        option: {
          calcHeight: 30,
          height: '380px',
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          border: true,
          addBtn: false,
          editBtn: false,
          delBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          page: false,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          menu: true,
          menuWidth: 100,
          column: [
            { label: '物料编码', prop: 'partNo', overHidden: true },
            {
              label: '物料名称',
              prop: 'partName',
              overHidden: true
            },
            {
              label: '物料型号',
              prop: 'partModel',
              overHidden: true
            },
            {
              label: '单据数量',
              prop: 'requiredQuantity'
            },
            {
              label: '发料仓',
              prop: 'issuedWarehouseName'
            },
            {
              label: '应发数量',
              prop: 'recommendQuantity',
              overHidden: true
            },
            {
              label: '物料状态',
              prop: 'status',
              type: 'select',
              dicData: [
                { label: '待出库', value: 1 },
                { label: '部分出库', value: 2 },
                { label: '已完成', value: 3 },
                { label: '已拆分', value: 4 }
              ]
            },
            {
              label: '已发数量',
              prop: 'issuedQuantity',
              overHidden: true
            },
            {
              label: '待发数量',
              prop: 'remainingQuantity',
              overHidden: true
            }
          ]
        }
      },
      semifinished: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        page: {
          pageSize: 20,
          currentPage: 1,
          total: 0
        },
        option: {
          calcHeight: 30,
          height: '380px',
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          delBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          page: true,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          menu: true,
          menuWidth: 100,
          column: [
            { label: '物料编码', prop: 'partNo', overHidden: true },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '物料型号',
              prop: 'partModel'
            },
            {
              label: '单据数量',
              prop: 'requiredQuantity'
            },
            {
              label: '发料仓',
              prop: 'issuedWarehouseName'
            },
            {
              label: '应发数量',
              prop: 'recommendQuantity'
            },
            {
              label: '推荐批次',
              prop: 'recommendLotNo',
              overHidden: true
            },
            {
              label: '推荐储位',
              prop: 'recommendStorageCode'
            },
            {
              label: '物料状态',
              prop: 'status',
              type: 'select',
              dicData: [
                { label: '待出库', value: 1 },
                { label: '部分出库', value: 2 },
                { label: '已完成', value: 3 },
                { label: '已拆分', value: 4 }
              ]
            },
            {
              label: '已发数量',
              prop: 'issuedQuantity',
              overHidden: true
            },
            {
              label: '待发数量',
              prop: 'remainingQuantity',
              overHidden: true
            },
            {
              label: '超发数量',
              prop: 'overQuantity',
              overHidden: true
            }
          ]
        }
      },
      packBoxDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        option: {
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          height: 'calc(100vh - 550px)',
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          menu: false,
          page: false,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          column: [
            {
              label: '包装条码',
              prop: 'packingSequenceNumber'
            },
            {
              label: '物料编码',
              prop: 'partNo'
            },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '储位',
              prop: 'areaCode'
            },
            {
              label: '批次',
              prop: 'lotDate'
            },
            {
              label: '品牌',
              prop: 'materialBrand'
            },
            {
              label: 'D/C',
              prop: 'lotNo'
            },
            {
              label: '数量',
              prop: 'packQuantity'
            },
            {
              label: '包装状态',
              prop: 'statusCh',
              width: 100
              // type: 'select',
              // dataType: 'string',
              // props: {
              //   label: 'dictValue',
              //   value: 'dictKey'
              // },
              // dicUrl: '/api/blade-system/dict/dictionary?code=pack_status'
            }
          ]
        }
      },
      shortageDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        option: {
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          height: 'calc(100vh - 550px)',
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          menu: false,
          page: false,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          column: [
            {
              label: '物料编码',
              prop: 'partNo'
            },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '单位',
              prop: 'uom'
            },
            {
              label: '需求数量',
              prop: 'originalQtyTotal'
            },
            // {
            //   label: '最小包规数量',
            //   prop: 'mpq'
            // },
            {
              label: '应发数量',
              prop: 'quantity'
            },
            {
              label: '欠料数量',
              prop: 'shortageQuantity'
            }
          ]
        }
      },
      unpackDialog: {
        visible: false,
        loading: false,
        data: [],
        form: {},
        option: {
          tip: false,
          searchShow: true,
          searchSpan: 4,
          searchMenuSpan: 6,
          dialogClickModal: false,
          height: 'calc(100vh - 550px)',
          border: true,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          cancelBtn: false,
          saveBtn: false,
          selection: false,
          menu: false,
          page: false,
          index: true,
          indexLabel: '序号',
          refreshBtn: false,
          expandBtn: false,
          columnBtn: false,
          column: [
            {
              label: '物料编码',
              prop: 'partNo'
            },
            {
              label: '物料名称',
              prop: 'partName'
            },
            {
              label: '单位',
              prop: 'uom'
            },
            {
              label: '新拆包装条码',
              prop: 'newPackSn'
            },
            {
              label: '包装数量',
              prop: 'newPackQuantity'
            },
            // {
            //   label: '需求数量',
            //   prop: 'quantityRequired'
            // },
            // {
            //   label: '包装批次',
            //   prop: 'lotNo'
            // },
            {
              label: '包装状态',
              prop: 'packStatusName'
            },
            {
              label: '对应原包装条码',
              prop: 'packSn'
            },
            {
              label: '对应原包装数量',
              prop: 'packQuantity'
            }
            // {
            //   label: '备料分析层级',
            //   prop: 'blfxcj'
            // },

            // {
            //   label: '需拆出数量',
            //   prop: 'quantityUnpacking'
            // }
          ]
        }
      },
      lotNoDialog: {
        visible: false
      }
    };
  },
  watch: {
    visible: {
      handler(value) {
        this.detailDialog.visible = value;
      }
    }
  },
  mounted() {},
  computed: {
    // 会否有撤销信息
    isCancelInfo() {
      if (this.form2.sheetOperationVOList && this.form2.sheetOperationVOList.length > 0) {
        return true;
      } else {
        return false;
      }
    },
    // 拆分撤销原因
    splitCause() {
      if (this.form2.sheetOperationVOList && this.form2.sheetOperationVOList.length > 0) {
        if (this.form2.sheetOperationVOList[0].operationType == 'SPLIT') {
          return this.form2.sheetOperationVOList[0].operationCause;
        }
      }
    },
    // 合并撤销原因
    mergeCause() {
      if (this.form2.sheetOperationVOList && this.form2.sheetOperationVOList.length > 0) {
        if (this.form2.sheetOperationVOList[0].operationType == 'MERGE') {
          return this.form2.sheetOperationVOList[0].operationCause;
        }
      }
    }
  },
  methods: {
    // 获取详情数据
    getData(id) {
      this.sheetId = id;
      this.tabsValue = '1';
      getDetail(this.sheetId).then((res) => {
        const data = res.data.data;
        this.form1 = data;
        this.detailHeaderForm = structuredClone(data);
        if (this.form1.preparationOrderNo) {
          // 获取原材料仓发料明细
          this.getRawMaterialWareHouseData('MATERIAL');
        }
      });
    },
    formatterSplitType(type) {
      if (type == 'WAREHOUSE') {
        return '仓库';
      } else if (type == 'PEOPLE') {
        return '人员';
      } else if (type == 'SECTION') {
        return '工段';
      }
    },
    // 获取原材料仓发料明细
    getRawMaterialWareHouseData(warehouseType) {
      console.log(warehouseType, this.form1.preparationOrderNo, 'this.form1.preparationOrderNo');
      if (warehouseType == 'MATERIAL') {
        this.detailDialog.loading = true;
        getMaterialInfoById(this.detailDialog.page.currentPage, this.detailDialog.page.pageSize, this.form1.preparationOrderNo, 'MATERIAL')
          .then((res) => {
            const data = res.data.data;
            this.detailDialog.page.total = data.total;
            this.detailDialog.data = data.records || [];
          })
          .finally(() => {
            this.detailDialog.loading = false;
          });
      } else if (warehouseType == 'LINE_SIDE') {
        this.lineSideWareHouseDialog.loading = true;
        getMaterialInfoById(this.lineSideWareHouseDialog.page.currentPage, this.lineSideWareHouseDialog.page.pageSize, this.form1.preparationOrderNo, 'LINE_SIDE')
          .then((res) => {
            const data = res.data.data;
            this.lineSideWareHouseDialog.page.total = data.total;
            this.lineSideWareHouseDialog.data = data.records || [];
          })
          .finally(() => {
            this.lineSideWareHouseDialog.loading = false;
          });
      } else if (warehouseType == 'PRODUCT') {
        this.semifinished.loading = true;
        getMaterialInfoById(this.semifinished.page.currentPage, this.semifinished.page.pageSize, this.form1.preparationOrderNo, 'PRODUCT')
          .then((res) => {
            const data = res.data.data;
            this.semifinished.page.total = data.total;
            this.semifinished.data = data.records || [];
          })
          .finally(() => {
            this.semifinished.loading = false;
          });
      }
    },
    // 获取线边仓调拨明细
    getLineSideWareHouseData() {
      this.lineSideWareHouseDialog.loading = true;
      this.lineSideWareHouseDialog.loading = false;
    },
    // 获取包装详情
    getPackBoxData() {
      this.packBoxDialog.loading = true;
      getPackBoxDetail(this.sheetId)
        .then((res) => {
          const data = res.data.data;
          this.packBoxDialog.data = data;
        })
        .finally(() => {
          this.packBoxDialog.loading = false;
        });
    },
    // 获取欠料明细
    getShortageData() {
      this.shortageDialog.loading = true;
      this.shortageDialog.loading = false;
    },
    // 获取拆包明细
    getUnpackData() {
      this.unpackDialog.loading = true;

      getUnpackDetail(this.sheetId)
        .then((res) => {
          const data = res.data.data;
          this.unpackDialog.data = data;
        })
        .catch((err) => {})
        .finally(() => {
          this.unpackDialog.loading = false;
        });
    },
    close() {
      this.sheetId = null;
      this.detailDialog.visible = false;
      this.$emit('closeDialog');
    },
    // 推荐包装详情
    handlePackView(row) {
      this.packBoxDialog.visible = true;
      // let data = [];
      // row.sheetRecommendList.forEach((list) => {
      //   if (list.recommendDataDTO.recommendPacks && list.recommendDataDTO.recommendPacks.length > 0) {
      //     list.recommendDataDTO.recommendPacks.forEach((pItem) => {
      //       pItem.recommendInventoryCode = list.recommendDataDTO.recommendInventoryCode;
      //       pItem.recommendAreaCode = list.recommendDataDTO.recommendAreaCode;
      //       pItem.recommendLotNo = list.recommendDataDTO.recommendLotNo;
      //       data.push(pItem);
      //     });
      //   }
      // });
      // this.$refs.packBox.packBoxDialog.data = data;
      // row.workOrderIdList = this.workOrderIdList;

      this.$refs.packBox.availableStockHeaderForm = structuredClone(row);
      this.$refs.packBox.getData(row);
      console.log(row, 'row');
    },
    // 推荐批次详情
    handleLotNoView(row) {
      this.lotNoDialog.visible = true;
      row.sheetRecommendList.forEach((list) => {
        list.recommendLotQuantity = list.recommendDataDTO.recommendLotQuantity;
      });
      this.$refs.lotNoBox.lotNoDialog.data = structuredClone(row.sheetRecommendList);
      this.$refs.lotNoBox.setFormHeader(row);
    },
    handleClick(params) {
      console.log(params, 'params');

      switch (params.name) {
        case '1':
          this.getRawMaterialWareHouseData('MATERIAL'); // 原材料发料明细
          break;
        case '2':
          this.getRawMaterialWareHouseData('LINE_SIDE'); // 获取线边仓调拨明细
          break;
        case '3':
          this.getRawMaterialWareHouseData('PRODUCT'); // 获取半成品仓调拨明细
          break;
        default:
          break;
      }
    },
    currentChange(currentPage) {
      this.detailDialog.page.currentPage = currentPage;
      this.getRawMaterialWareHouseData('MATERIAL');
    },
    sizeChange(pageSize) {
      this.detailDialog.page.pageSize = pageSize;
      this.getRawMaterialWareHouseData('MATERIAL');
    },
    lineSideCurrentChange(currentPage) {
      this.lineSideWareHouseDialog.page.currentPage = currentPage;
      this.getRawMaterialWareHouseData('LINE_SIDE');
    },
    lineSideSizeChange(pageSize) {
      this.lineSideWareHouseDialog.page.pageSize = pageSize;
      this.getRawMaterialWareHouseData('LINE_SIDE');
    },
    semCurrentChange(currentPage) {
      this.semifinished.page.currentPage = currentPage;
      this.getRawMaterialWareHouseData('PRODUCT');
    },
    semSizeChange(pageSize) {
      this.semifinished.page.pageSize = pageSize;
      this.getRawMaterialWareHouseData('PRODUCT');
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .detailDialog {
  .el-dialog__body {
    padding: 10px 20px;
  }
  .avue-crud__menu {
    display: none;
  }
  .avue-form__menu {
    display: none;
  }
  .ruleRowForm {
    margin-bottom: 5px;
    .el-radio {
      margin-right: 10px;
    }
    .header-icon {
      margin-right: 10px;
    }
  }
  .detailTable {
    .titleIcon {
      display: flex;
      align-items: center;
      margin: 5px 0;
      .txt {
        font-weight: bold;
      }
    }
    .content {
      margin-bottom: 10px;
      .inline {
        width: 50%;
        display: inline-block;
      }
    }
  }
}
</style>
